<template>
  <div>
    <p>首页内容</p>
    <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)">
    <p>城市：{{city}}</p>
    <p>initCounter - {{initCounter}}</p>
    <p>newInitCounter - {{newInitCounter}}</p>
    <p>computerInitCounter - {{computerInitCounter}}</p>
    <p>{{ author.id }}</p>
    <p>{{ author.name }}</p>
  </div>

</template>

<script>
    export default {
      name: "add-on-1",
      model:{
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: Boolean,
        author: Object,
        initCounter: String,
        city:{
          type: String,
          require: true,
          default: 'shanghai',
          validator: function (v) {
            console.log(['shaanxi','shanghai','jiangsu'].indexOf(v) !== -1)
            return ['shaanxi','shanghai','jiangsu'].indexOf(v) !== -1
          }
        }
      },
      data: function () {
        return {
          newInitCounter: this.initCounter
        }
      },
      methods:{
        change: function (v) {
          console.log('v=====', v)
        }
      },
      computed: {
        computerInitCounter:function () {
          return this.initCounter + "====";
        }
      }
    }
</script>

<style scoped>

</style>
